<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单管理右侧</title>
<link rel="stylesheet" href="${ctx}/resources/layui/css/layui.css">
<link rel="stylesheet" href="${ctx}/resources/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="${ctx}/resources/layui_ext/dtree/font/dtreefont.css">
</head>
<body style="padding: 10px;">
	<!-- 搜索条件开始 -->
	<form class="layui-form" method="post" id="searchFrm" lay-filter="searchFrm">
		<div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">菜单名称:</label>
		      <div class="layui-input-inline">
		        <input type="text" name="title" autocomplete="off" class="layui-input">
		      </div>
		      <div class="layui-input-inline">
		      	<button type="button" class="layui-btn layui-icon layui-icon-search"
					lay-submit="" lay-filter="doSearch">查询</button>
				<button type="reset" class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
		      </div>
		      
		    </div>
	   	</div> 
	</form>
	<!-- 搜索条件结束-->
	
	<!-- 数据表格开始 -->
	<table class="layui-hide" id="menuTable" lay-filter="menuTable"></table>
	<!-- 数据表格结束 -->
	<!-- 表格头部工具栏开始 -->
	<div style="display: none;" id="menuToolbar">
		<button type="button" class="layui-btn" lay-event="add">添加</button>
	</div>
	<!-- 表格头部工具栏结束 -->
	<!-- 表格行工具栏开始 -->
	<div style="display: none;" id="menuRowbar">
		<button type="button" class="layui-btn layui-btn-sm" lay-event="update">修改</button>
		<button type="button" class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
	</div>
	<!-- 表格行工具栏结束 -->
	
	<!-- 添加和修改弹出层开始 -->
	<div style="display: none;margin: 10px;" id="addOrUpdateDiv">
		<form class="layui-form" method="post" lay-filter="dataFrm" id="dataFrm">
			<div class="layui-form-item">
				<!-- id，隐藏域，修改时使用 -->
				<input type="text" name="id" hidden="">
				<div class="layui-block">
			      	<label class="layui-form-label">父级菜单</label>
                    <div class="layui-input-block">
                        <!-- 添加隐藏域 保存父级菜单id -->
                        <input type="hidden" id="pid" name="pid"  lay-verify="required">
                        <ul id="menuTree" class="dtree" data-id="0"></ul>
                    </div>
			    </div>
		    </div>
		    <div class="layui-form-item">
			    <div class="layui-block">
			      	<label class="layui-form-label">菜单名称:</label>
			      	<div class="layui-input-block">
			        	<input type="text" name="title" placeholder="请输入菜单名称" lay-verify="required" autocomplete="off" class="layui-input">
			    	</div>
			    </div>
		    </div>
		    <div class="layui-form-item">
			    <div class="layui-block">
			      	<label class="layui-form-label">跳转地址:</label>
			      	<div class="layui-input-block">
			       		<input type="text" name="href" placeholder="请输入跳转地址" autocomplete="off" class="layui-input">
			     	</div>
			    </div>
		    </div>
		    <div class="layui-form-item">
			    <div class="layui-inline">
			      	<label class="layui-form-label">打开方式:</label>
			      	<div class="layui-input-inline">
			       		<input type="text" name="target" placeholder="请输入打开方式" autocomplete="off" class="layui-input">
			     	</div>
			    </div>
			    <div class="layui-inline">
			      	<label class="layui-form-label">图标:</label>
			      	<div class="layui-input-inline">
			       		<input type="text" name="icon" placeholder="请输入图标代码" autocomplete="off" class="layui-input">
			     	</div>
			    </div>
	   		</div> 
	   		<div class="layui-form-item">
				<label class="layui-form-label">是否展开:</label>
			    <div class="layui-input-block">
			      	<input type="radio" name="spread" value="1" title="是">
			      	<input type="radio" name="spread" value="0" title="否" checked="">
			    </div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">是否可用:</label>
			    <div class="layui-input-block">
			      	<input type="radio" name="available" value="1" title="是" checked="">
			      	<input type="radio" name="available" value="0" title="否">
			    </div>
			</div>
			<div class="layui-form-item" style="text-align: center;">
				<div class="layui-input-block">
					<button type="button" class="layui-btn layui-icon layui-icon-release"
						lay-submit="" lay-filter="doSubmit">保存</button>
					<button type="reset" class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 添加和修改弹出层结束 -->
	

<script src="${ctx}/resources/layui/layui.js"></script>
<script>
	var tableIns;
	layui.extend({
	    dtree: '${ctx}/resources/layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
	  }).use(['layer','table','form','dtree'], function() {
		var $ = layui.$;
		var layer = layui.layer;
		var table = layui.table;
		var form = layui.form;
		var dtree = layui.dtree;
		//初始化菜单数据表格
		tableIns = table.render({
			    elem: '#menuTable'			//渲染的目标对象
			    ,url:'${ctx}/menu/menuList.action'	//数据接口
			    ,title: '菜单数据表'			//数据导出时的标题
			    ,toolbar:"#menuToolbar"		//表头的工具条
			    ,height:"full-100"	
			    ,page: true			//是否启用分页
			    ,cols: [[			//列表数据
			      {type: 'checkbox', fixed: 'left'}
			      ,{field:'id', title:'id', align:"center",width:"60"}
			      ,{field:'pid', title:'pid', align:"center",width:"60"}
			      ,{field:'title', title:'名称', align:"center",width:"150"}
			      ,{field:'href', title:'跳转地址', align:"center",width:"280"}
			      ,{field:'icon', title:'图标', align:"center", templet:function(d){
			    	  return "<span class='layui-icon'>"+d.icon+"</span>";
			      }}
			      ,{field:'spread', title:'展开', align:"center", templet:function(d){
			    	  return d.spread=="1"?"<span style='color:red;'>是</span>":"<span style='color:green;'>否</span>";
			      }}
			      ,{field:'available', title:'可用', align:"center",  templet:function(d){
			    	  return d.available=="1"?"<span style='color:green;'>是</span>":"<span style='color:red;'>否</span>";
			      }}
			      ,{field:'target', title:'打开方式', align:"center",width:"100"}
			      ,{fixed:'right', title:'操作', toolbar:"#menuRowbar", width:"140", align:"center"}
			    ]]
			    ,done:function(res, curr, count){
                    //回调函数
                    //判断当前页码是否大于1
                    if(curr > 1 && res.data.length == 0){
                        //当前页码-1
                        var pageValue = curr - 1;
                        tableIns.reload({
                            page:{curr:pageValue}//修改页码
                        });
                    }
                }
			    
			  });
		//监听查询表单的提交
		form.on("submit(doSearch)",function(data){
			if(data.field.id == undefined){
				data.field.id = "";
			}
			tableIns.reload({
				where: data.field
				,page: {
				  curr: 1 //重新从第 1 页开始
				}
			});		
		})
		 
		//1. 监听头工具栏事件 
		table.on("toolbar(menuTable)",function(obj){
			//menuTable是表格的lay-filter属性
			switch (obj.event) {
			case "add":			//这里匹配的是工具栏按钮的 lay-event属性的值
				openAddmenu();
				break;
			}
		});
		//弹出层实例
		var mainIndex;
		//弹出层对应的提交url
		var url;
		//打开添加用户弹出层
		function openAddmenu() {
			mainIndex = layer.open({
				type:1
				,title:"添加菜单"
				,content:$("#addOrUpdateDiv")
				,area:['700px']
				,success:function(ayero, index){
					//清空表单数据 jquery对象转dom对象，有reset函数
					$("#dataFrm")[0].reset();
					url = "${ctx}/menu/addMenu.action";
				}
			});
		}
		//弹出层中的父级菜单下拉树，初始化
		var menuTree = dtree.renderSelect({
			elem:"#menuTree"
			,dataStyle: "layuiStyle"  //使用layui风格的数据格式
			,dataFormat: "list"  //配置data的风格为list
			,response:{message:"msg",statusCode:0}  
			,url:"${ctx}/menu/loadMenuTreeLeft.action"
			,selectTips: "请选择父级菜单节点"
		});
		//监听下拉树的节点点击时间，将选中值同步到隐藏域pid中
		dtree.on("node(menuTree)",function (obj) {
			$("#pid").val(obj.param.nodeId);
        });
		
		//监听添加用户弹出层的提交操作
		form.on("submit(doSubmit)",function(data){
			//序列化表单数据
			var params = $("#dataFrm").serialize();
			$.post(url, params, function(result){
				if(result.success){
					//刷新数据表格
					tableIns.reload();
					//刷新下拉树
					menuTree.reload();
					//刷新左侧菜单树
                    window.parent.left.menuTree.reload();
				}
				//显示响应提示信息
				layer.msg(result.message);
				//关闭弹出层
				layer.close(mainIndex);
			});
			//阻止表单提交
			return false;
		});
		
	 	//5. 监听行工具栏事件
		table.on('tool(menuTable)', function(obj){
		  var data = obj.data; //获得当前行数据
		  switch (obj.event) {
			case 'update':
				openUpdatemenu(data);
				break;
			case 'delete':
				deleteMenu(data);
				break;
			}
		});
		
		//打开修改用户弹出层
		function openUpdatemenu(data) {
			mainIndex = layer.open({
				type:1
				,title:"修改用户"
				,content:$("#addOrUpdateDiv")
				,area:['700px']
				,success:function(ayero, index){
					//回显父级菜单下拉树
					dtree.dataInit("menuTree",data.pid);
					dtree.selectVal("menuTree");
					//回显表单
					form.val('dataFrm',data);
					url = "${ctx}/menu/updateMenu.action";
				}
					  
			});
		}
		//删除菜单
		function deleteMenu(data){
	 		//判断该菜单是否有子节点，如果有，则提示无法删除
            $.post("${ctx}/menu/hasChildren.action",{"id":data.id}, function (result) {
                if(result.success){
                    layer.msg(result.message);
                }else {
                    //不存在，直接删除
                    layer.confirm("是否删除菜单["+data.title+"]?",{"icon":3,"title":"提示"},function (index) {
                        $.post("${ctx}/menu/deleteById.action",{"id":data.id},function (result) {
                            if(result.success){
                                //刷新数据表格
                                tableIns.reload();
                                //刷新下拉树
                                menuTree.reload();
                                //刷新左侧菜单树
                                window.parent.left.menuTree.reload();
                            }
                            layer.msg(result.message);
                        }, "json");
                    });

                }

            },"json");
	 	}
		 	
	});
	//重新加载数据表格的数据，跟据传入的id值，由左页面调用
	function reloadTableData(data){
		tableIns.reload({
			  where: {
				  id:data
			  }
			  ,page: {
			    curr: 1 //重新从第 1 页开始
			  }
			});
	}
	
</script>
</body>
</html>